<template>
	<view class="listTops">
		<block v-if="list.length>0">
			<view class="topText dis dis2 dis3">
				<!-- <text class="tx1">{{day}}</text> -->
				<text class="tx1">不健康行为记录</text>
				<image src="../static/img/jilubtn.png" mode="aspectFit" class="jilu" @click="goUrl"></image>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="item dis" v-if="item.isover==0">
					<view class="left  contenr">
						<image src="../static/img/emo.png" mode="aspectFit" class="emo" :class="[index==0?'':'images']" v-if="item.isconflict ==1 && item.isover==0"></image>
						<image src="../static/img/wei.png" mode="aspectFit" class="emo1" v-if="item.isover==0"></image>
						<image src="../static/img/yi.png" mode="aspectFit" class="emo1" v-if="item.isover==1"></image>
					</view>
					<view class="conter mar dis dis5 " :class="{'mars':item.actionsuggestion.length>13}">
						<text class="text1" >{{item.actionsuggestion}}</text>
						<text class="text2">{{item.actiontitle}}</text>
						<text class="text3">{{item.actiondate}}</text>
					</view>
					<view class="rigth contenr">
						<image src="../static/img/wan.png" mode="aspectFit" class="wan" v-if="item.isover==0" @click="triumph(item.id,index)"></image>
						<image src="../static/img/cheng.png" mode="aspectFit" class="wan" v-if="item.isover==1"></image>
					</view>
				</view>
			</block>
		</block>
		<block v-else>
			<view class="topText dis dis2">
				<!-- <text class="tx1">{{day}}</text> -->
				<text class="tx1">不健康行为记录</text>
			</view>
			<yangs :isSet="1"></yangs>
		</block>
		<block v-if="listGoods.length>0">
			<view class="itemBody">
				<view class="topText dis dis1 dis2">
					<image src="../static/img/lin_1.png" mode="aspectFit" class="lin_1"></image>
					<view class="texts">以下就当没发生过</view>
					<image src="../static/img/lin_2.png" mode="aspectFit" class="lin_1"></image>
				</view>
			</view>
			<view class="item dis" v-for="(item,index) in listGoods" :key="index">
				<view class="left  contenr">
					<image src="../static/img/emo.png" mode="aspectFit" class="emo" :class="[index==0?'':'images']" v-if="item.isconflict ==1 && item.isover==0"></image>
					<image src="../static/img/wei.png" mode="aspectFit" class="emo1" v-if="item.isover==0"></image>
					<image src="../static/img/yi.png" mode="aspectFit" class="emo1" v-if="item.isover==1"></image>
				</view>
				<view class="conter mar dis dis5 " :class="{'mars':item.actionsuggestion.length>13}">
					<text class="text1 text2s" >{{item.actionsuggestion}}</text>
					<text class="text2">{{item.actiontitle}}</text>
					<text class="text3">{{item.actiondate}}</text>
				</view>
				<view class="rigth  contenr">
					<image src="../static/img/cheng.png" mode="aspectFit" class="wan" v-if="item.isover==1"></image>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import yangs from "@/components/yangs.vue"
	export default {
		props: {
			list: {
				type: Array
			},
			day: {
				type: String
			},
			listGoods: {
				type: Array
			},

		},
		components: {
			yangs
		},
		data() {
			return {

			};
		},
		methods: {
			goUrl() {
				let that = this;
				uni.navigateTo({
					url: `/second/me/record/record`
				})
			},
			triumph(id, index) {
				let that = this;
				this.$http._post('yang/oversuggestion.do', {
					id
				}).then(res => {
					console.log(res)
					if (res.data.issuccess == 1) {
						this.$http.isMssage(res.data.data);
						this.$emit('func', true);
					} else {
						this.$http.isMssage(res.data.msg)
					}
				})
				// console.log(this.list)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";
	// .listTops{
	// 	min-height: ;
	// }
	.topText {
		height: 136upx;
		width: 100%;
		font-size: 28upx;
		font-family: $typeface;
		font-weight: 500;
		color: #333333;

		.tx1 {
			margin-left: 32upx;
			font-size: 36upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.jilu {
			width: 128upx;
			height: 56upx;
			margin-right: 32upx;
		}
	}

	.item {
		width: 686upx;
		min-height: 181upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: 24upx auto;
		margin-top: 0;
		.mar {
			margin-top: 23upx;
			height: 158upx;
		}

		.left {
			width: 116upx;

			.emo {
				width: 116upx;
				height: 158upx;
			}

			.emo1 {
				width: 72upx;
				height: 72upx;
			}

			.images {
				width: 72upx;
				height: 72upx;
			}
		}

		.conter {
			width: 428upx;

			.text1 {
				min-height: 45upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				line-height: 45upx;
				margin-top: 5rpx;

			}

			.text1s {
				font-size: 26upx;
			}
			.text2s{
				color: #999;
			}

			.text2 {
				height: 40upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #999999;
				line-height: 40upx;
				margin-top: 15upx;
			}

			.text3 {
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #C1C1C1;
				line-height: 33upx;
			}
		}

		.rigth {
			width: 114upx;

			.wan {
				width: 114upx;
				height: 114upx;
			}
		}
		.mars{
			// margin-top: 0upx;
			// height: 0upx;
			// height: 100%;
		}

	}

	.itemBody {
		width: 686upx;
		margin: 0 auto 16upx auto; 

		.topText {
			width: 100%;
			height: 33upx;
			margin-bottom: 12upx;

			.topLeft {
				width: 103upx;
				height: 1px;
				background: #E2E2E2;
			}

			.texts {
				margin: 0 24upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #C1C1C1;
			}

			.lin_1 {
				width: 103upx;
				height: 1px;
			}
		}


	}
</style>
